<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String basePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/";
%>
<html>
<head>
    <base href="<%=basePath%>">
    <!--引入jquery-->
    <script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
    <!--引入echarts插件-->
    <script type="text/javascript" src="jquery/echarts/echarts.min.js"></script>
    <title>客户和联系人统计图表</title>
    <script type="text/javascript">
        $(function () {
            //发送查询请求
            $.ajax({
                url:'workbench/chart/customerAndContacts/queryCountOfTranGroupByStage1.do',
                type:'post',
                dataType:'json',
                success:function (data) {
                    // 基于准备好的dom，初始化echarts实例
                    var myPieChart = echarts.init(document.getElementById('pieChart'));
// 指定图表的配置项和数据
                    var option = {
                        title: {
                            text: '客户和联系人统计图表',
                            subtext: '交易表中各个阶段的数量',
                            left: 'center',
                            top: 20,
                        },
                        tooltip: {
                            trigger: 'item'
                        },
                        legend: {
                            data: data.map(item => item.name),
                            orient: 'vertical',
                            left: 'left',
                        },
                        series: [
                            {
                                name: '访问来源',
                                type: 'pie', // 设置图表类型为饼图
                                radius: '50%',
                                center: ['50%', '50%'],
                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                },
                                data:data
                            }
                        ]
                    };
// 使用刚指定的配置项和数据显示图表。
                    myPieChart.setOption(option);
                }
            });
        });
    </script>
</head>
<body>

<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="pieChart" style="width: 900px;height:700px;"></div>
</body>
</html>
